<template>
    <div ref="ReactDocViewer" v-if="!loading">
        react组件
    </div>
</template>

<script>
import { defineComponent,onMounted,ref,defineProps } from 'vue';
import ReactDom from 'react-dom/client'
import ReactDocViewer from 'react-doc-viewer'

export default defineComponent({
    setup(){
        const ReactDocViewer=ref(null)
        const loading=ref(true)
        let root=null
        const props=defineProps({
            url:{
                type:"String",
                require:true
            }
        })

        onMounted(()=>{
            console.log("url",props.url)
            const fileURL=URL.createObjectURL(props.url)
            const docs=[{uri:fileURL}]
            if(root){
                root.unmount()
            }
            root=ReactDom.createRoot(ReactDocViewer.value)
            // root.render(
            //     <ReactDocViewer
            //         documents={docs}
            //         onLoadEnd={() => {
            //         loading.value = false; // 加载结束
            //         }}
            //     />
            // )
            // loading.value=true
        })

        return {
            ReactDocViewer,
            loading,
            props
        }
    }
})

</script>